<template>
  <el-tabs
      v-model="activeTab"
      type="card"
      @tab-remove="removeTab"
      @tab-click="handleTabClick"
      style="height: 100%"
  >
    <el-tab-pane
        v-for="item in orderedTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
        :closable="!item.fixed"
    >
      <!-- 可选：添加一个 div 容器以确保内容区域撑开 -->
      <div class="tab-content" v-if="activeTab === item.name">
        <router-view v-if="activeTab === item.name"/>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>


<script setup>
import {ref, computed, watch, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

// 初始化 tabs 数组，首页作为固定标签
const tabs = ref([])

const activeTab = ref()

// 从 localStorage 加载 tabs 数据
function loadTabsFromStorage() {
  const savedTabs = localStorage.getItem('openTabs')
  if (savedTabs) {
    return JSON.parse(savedTabs)
  }
  // 如果没有存储的数据，则初始化为包含首页的数组
  return [{name: 'home', title: '首页', fixed: true}]
}

// 将 tabs 数据保存到 localStorage
function saveTabsToStorage(tabsArray) {
  localStorage.setItem('tabs', JSON.stringify(tabsArray))
}

// 确保首页标签始终在首位
const orderedTabs = computed(() => {
  const homeTab = tabs.value.find(tab => tab.name === 'home')
  return homeTab ? [homeTab, ...tabs.value.filter(tab => tab.name !== 'home')] : tabs.value
})

// 页面加载时从 localStorage 恢复 tabs
onMounted(() => {
  tabs.value = loadTabsFromStorage()
  if (!tabs.value.some(tab => tab.name === 'home')) {
    tabs.value.unshift({name: 'home', title: '首页', fixed: true})
  }
  // 设置当前激活的 tab
  if (route.name && tabs.value.some(tab => tab.name === route.name)) {
    activeTab.value = route.name
  } else {
    activeTab.value = 'home'
    router.push({name: 'home'})
  }
})

function removeTab(targetName) {
  if (targetName === 'home') {
    // 首页不可被删除
    return
  }

  let index = tabs.value.findIndex(tab => tab.name === targetName)
  if (index > -1) {
    tabs.value.splice(index, 1)
    if (targetName === activeTab.value && tabs.value.length > 0) {
      activeTab.value = tabs.value[Math.min(index, tabs.value.length - 1)].name
      router.push({name: activeTab.value})
    }
  }
  saveTabsToStorage(tabs.value)
}

function handleTabClick(tabInstance) {
  activeTab.value = tabInstance.props.name
  router.push({name: activeTab.value})
}

function addTab(newTab) {
  if (!tabs.value.some(tab => tab.name === newTab.name)) {
    tabs.value.push({...newTab, closable: !newTab.fixed})
  }
  activeTab.value = newTab.name
  saveTabsToStorage(tabs.value)
}

watch(route, (newRoute) => {
  if (newRoute.name && !tabs.value.some(tab => tab.name === newRoute.name)) {
    addTab({name: newRoute.name, title: newRoute.meta.title || '', fixed: newRoute.name === 'home'})
  }
  activeTab.value = newRoute.name
})

</script>

<style lang="scss" scoped>
.el-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.el-tabs__header {
  margin: 0;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.el-tabs__content {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.tab-content {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

</style>

